<template>
	<view>
		<view class="me-wapper">
			<view class="me">
				<view class="photo-wapper">
					<image src="../../static/icos/default-face.png" class="me-photo" @click="goLogin()" v-if="iflogin"></image>
					<image :src="userInfo.faceImg||'../../static/icos/default-face.png'" class="me-photo"  v-if="!iflogin"></image>
				</view>
				<view class="me-word" @click="goLogin()" v-if="iflogin">注册/登录</view>
				<view class="user-wapper">
					<view class="user" v-if="!iflogin">{{userInfo.nickname||'空'}}</view>
					<view class="id" v-if="!iflogin">账号:{{userInfo.username||'空'}}</view>					
				</view>
				<image src="/static/icos/settings.png" class="setting" v-if="!iflogin" @click="goMeInfo()"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				iflogin:true,
				userInfo:{}
			}
		},
		methods: {
			goLogin(){
				uni.navigateTo({
					url:"../login/login"
				})
			},
			goMeInfo(){
				uni.navigateTo({
					url:'../meInfo/meInfo'
				})
			}
		},
		onShow() {
			let user=uni.getStorageSync('user')
			console.log(user)
			if(user.length!=0){
				this.userInfo=user[0]
				this.iflogin=false
			}else{
				this.iflogin=true
			}
		}
	}
</script>

<style>

/* #ifndef MP */
.me-wapper{
	background-color: #fdd655;
	height: 280upx;
	position: relative;
	width: 750upx;
	overflow: hidden;
}
/* #endif */
/* #ifdef MP*/
.me-wapper{
	background-color: #fdd655;
	height: 200upx;
	position: relative;
	width: 100%;
}
/* #endif */
.me{
	display: flex;
	align-items: center;
	position: absolute;
	bottom: 50upx;
	padding-left: 20upx;	
	width: 100%;
}
.me-word{}
.photo-wapper{
	width: 125upx;
	height: 125upx;
	padding: 0 20upx;
}
.me-photo{
	width: 100%;
	height: 100%;
	border-radius: 50%;
}
.user-wapper{
	margin-left: 30upx;
}
.user{
	font-size: 20px;
	font-weight: bold;
}
.id{
	color: #555555;
	width: 400upx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 16px;
}
.setting{
	height: 20px;
	width: 20px;
	position: absolute;
	right: 50upx;
	top: 0;
}
</style>
